<template>
  <div class="aboutArticle">
      <div class="aboutAuthor">相关文章</div>
        <div v-for="i in 5" :key="i" class="articleList">
            <div class="articleTitle">2021 年当我们聊前端部署时，我们在聊什么</div>
            <div class="articleBottom">
                <span>939</span> <span>111</span>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.aboutArticle{
    background-color: #fff;
    .aboutAuthor {
        padding: 1rem 1.3rem;
        font-size: 1.16rem;
        color: #333;
        border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }
  .articleList {
      padding: .8rem 1.1rem .6rem;
      cursor: pointer;
      &:hover {
          background-color: hsla(0,0%,85.1%,.1);
      }
      .articleTitle {
          font-size: 1.2rem;
          padding-bottom: .6rem;
          color: #333;
      }
      .articleBottom {
          color: #b2bac2;
          span:last-child {
              font-size: 1.1rem;
              margin-left: .8rem;
          }
      }
  }
}
</style>